import React, { Component } from 'react'
import { Steps , Row,Col , Form,Input,Select, Cascader,Button ,message } from 'antd';
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
import { advicecatetory } from '../../utils';
import "./index.scss"
import RichEditor from './richEditor';
import { ajax } from '../../api';
const { Step } = Steps;
const {Option} = Select
const steps = [
    {title:"基本信息",desc:"请认真填写好意见标题和分类",status:"process",icon:<UserOutlined />},
    {title:"意见内容",desc:"请认真填好意见内容",status:"wait",icon:<SolutionOutlined />},
    {title:"提交意见",desc:"谢谢你的建议.",status:"wait",icon:<SmileOutlined  />},
]


export default class UpdateAdvise extends Component {
    state = {
        current:0,
        content:""  , // 意见内容 
        form:null,
        keyIndex:0
    }
    getContent = (content)=>{
        this.setState({
            content
        })
    }
    next = ()=>{
        if(this.state.current==0){
            this.firstform.validateFields().then(
                value=>{
                    this.setState({
                        current:++this.state.current,
                        form:value
                    })
                }
            )
        }else{
            if(this.state.current==1&&this.state.content){
                this.setState({
                    current:++this.state.current
                })
            }else{
                message.error("请完善文本编辑器的内容")
            }
        }
    }
    prev = ()=>{
        this.setState({
            current:--this.state.current
        })
    }
    submitAdvise = ()=>{
        ajax.updateadviseone({
            ...this.state.form,
            _id:new URLSearchParams(this.props.location.search).get('aid'),
            content:this.state.content
        })
        .then(res=>{
            if(res.code==200){
                this.props.history.push("/main/advise/list")
            }
        })
    }
    componentDidMount(){
        ajax.getadviseone({
            _id:new URLSearchParams(this.props.location.search).get('aid')
        })
        .then(res=>{
            if(res.code==200){
                this.setState({
                    content:res.result.content,
                    keyIndex:2
                })
                this.firstform.setFieldsValue(res.result)
            }
        })
    }
    render() {
        const {current} = this.state
        return (
            <div>
                <h2  style={{margin:'6px 0 '}} > 修改意见  </h2>
                <div style={{marginTop:15}}>
                    <Steps current={current}>
                        {
                            steps.map((l,i)=>{
                                return (
                                    <Step 
                                        title={l.title}
                                        description={l.desc}
                                        icon={l.icon}
                                        // status={l.status}
                                        key={i}
                                    >

                                    </Step>
                                )
                            })
                        }
                    </Steps>
                </div>
                <Row>
                    <Col span={22}>
                        <div style={{marginTop:10,display:current==0?'block':'none'}}>
                            <Form
                                name="firstForm"
                                ref={el=>this.firstform=el}
                                layout="vertical"
                                onFinish = {this.submitFirstForm}
                                onFinishFailed = {this.onFirstFinishFailed}
                                className="firstform"
                            >
                                <Form.Item
                                    label="意见标题"
                                    name="title"
                                    rules={[
                                        { required: true, message: '请输入意见标题' },
                                    ]} 
                                >
                                    <Input placeholder="请输入意见标题"/>
                                </Form.Item>
                                <Form.Item
                                    label="意见分类"
                                    name="category"
                                    rules={[
                                        { required: true, message: '请选择' },
                                    ]} 
                                >
                                    <Cascader
                                        options={advicecatetory}
                                        placeholder="请选择意见类别"
                                    >
                                    </Cascader>   
                                </Form.Item>
                            </Form>
                        </div>

                        <div style={{marginTop:10,height:240,display:current==1?'block':'none'}}>
                            <RichEditor
                                content = {this.state.content}
                                getContent={this.getContent}
                                key = {this.state.keyIndex}
                            />
                        </div>
                    </Col>
                </Row>

                <Row style={{marginTop:10}}>
                    <Col span={12}>
                        {current>0 &&  <Button type="danger" onClick={this.prev} style={{margin:"0 6px"}}>上一步</Button>}
                        {current<steps.length-1 && <Button type="primary" onClick={this.next}>下一步</Button>}
                        {current == steps.length-1  &&<Button type="" onClick={this.submitAdvise}>提交意见</Button>}
                    </Col>
                </Row>
            </div>
        )
    }
}
